<MDXHeader
  title="Navigation Menu"
  description="A collection of links for navigating websites."
  docs="https://kobalte.dev/docs/core/components/navigation-menu"
/>

<ComponentPreview name="navigation-menu-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

```bash
npx solidui-cli@latest add navigation-menu
```

</TabsContent>

<TabsContent value="manual">
<Steps>

<Step>Install the following dependencies: </Step>

```bash
npm install @kobalte/core
```

<Step>Copy and paste the following code into your project: </Step>

<ComponentSource name="navigation-menu" />

</Steps>
</TabsContent>

</Tabs>

## Usage

```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIcon,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger
} from "~/components/ui/navigation-menu"
```

```tsx
<NavigationMenu>
  <NavigationMenuItem>
    <NavigationMenuTrigger>
      Item one
      <NavigationMenuIcon />
    </NavigationMenuTrigger>
    <NavigationMenuContent>
      <NavigationMenuLink>Link</NavigationMenuLink>
    </NavigationMenuContent>
  </NavigationMenuItem>
</NavigationMenu>
```
